<template>
	<div class="login_container">
		<div class="login_box">
			<!--头像-->
			<div class="avatar">
				<img src="../assets/logo.png"/>
			</div>
			<!--表单区-->
			<el-form ref="form"  :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form" >
			  <!-- 账号 -->
			  <el-form-item prop="manager_email" >
			    <el-input v-model="loginForm.manager_username"  prefix-icon="czs-user"></el-input>
			  </el-form-item>
			  <!-- 密码 -->
			  <el-form-item  prop="manager_password">
			    <el-input v-model="loginForm.manager_password"  prefix-icon="czs-lock" show-password></el-input>
			  </el-form-item>
			  <!-- 按钮 -->
			  <el-form-item  class="btns">
			     <el-button type="primary" @click="login()">登录</el-button>
				 <el-button type="info" disabled>重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
		
	</div>
</template>

<script>
	import {userLogin} from "@/api/user";

  export default{
		data(){
			return{
				//登录表单的数据绑定对象
				loginForm:{
					manager_username:'',
					manager_password:''
				},
				//表单验证规则
				loginFormRules:{
					//email
          manager_username:[//trigger:blur失去焦点时触发
						{ required: true, message: '请输入用户名', trigger: 'blur' },
					],
					manager_password:[
						{ required: true, message: '请输入密码', trigger: 'blur' }
					]
					
				}
			} 
		},
		methods:{
			login(){		
				this.$refs.form.validate(valid=>{
					if(!valid){//格式验证不对，res为flase
						return
					}
					console.log("表单验证成功")
          userLogin({
            username:this.loginForm.manager_username,
            password:this.loginForm.manager_password
          }).then(res=>{//登陆成功
            //把token保存到本地
            window.sessionStorage.setItem("token",res.token)
            //编程式导航
            this.$router.push("/home")
          })
				})
			}
		}
		
	}
</script>

<style lang="less" scoped>
.login_container{
	background-color:#274a6c;
	height: 100%;
}
.login_box{
	width: 450px;
	height: 300px;
	background-color: white;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.avatar{
	height: 130px;
	width: 130px;
	border: 1px  solid #eee;
	border-radius: 50%;
	padding: 10px;
	box-shadow:  0 0 10px #ddd;
	position: absolute;
	left:50%;//绝对定位，该元素的左边缘移动到父元素的50%的
	transform: translate(-50%,-50%);//横向，纵向 移动本元素宽，高的50%
	background-color: white;
	img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #eee;
	}
	
}
	
.btns{
	display: flex;
	justify-content: flex-end;
}
.login_form{
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 30px;
	box-sizing: border-box;
}
	
</style>
